<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #list li{
            width: 300px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>JS 事件</h1>
    <hr>

    <ul id="list">
        <li>小艳艳, 你宣我吗? 宣1</li>
        <li>小静静, 你宣我吗? 宣2</li>
        <li>小洋洋, 你宣我吗? 宣3</li>
        <li>小哥哥, 你宣我吗? 宣4</li>
        <li>小姐姐, 你宣我吗? 宣5</li>
    </ul>

    <hr>
    <button onclick="ck(this)">白日依山尽,黄河入海流</button>

    <script>

    function ck(obj){
        // alert(this);
        // alert(this.innerHTML);
        alert(obj.innerHTML);
    }


    var lis = document.getElementById('list').getElementsByTagName('li');
    // console.log(lis);
    
    // 遍历绑定事件
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            // alert('OK');
            // alert(lis[i].innerHTML); // NO
            // alert(lis[i]); // undefined
            // alert(lis[1]);
            // alert(i); // 5
            alert(this.innerHTML);
        }
    }

    
    </script>
</body>
</html>